<template>
  <div class="app-container">

    <div style="float: left;margin-left: 200px;margin-top: 100px">
      <div class="el-upload">
        <img :src="user.avatar ? user.avatar : Avatar"
             title="点击上传头像" class="avatar" @click="toggleShow">
        <myUpload
          v-model="show"
          :headers="headers"
          :url="updateAvatarApi"
          @crop-upload-success="cropUploadSuccess"
        />
        <br>
        <span>上传头像</span>
      </div>
    </div>
    <div style="float: left;margin-top: 100px;margin-left: 50px">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="form.oldPassword" show-password auto-complete="on" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="form.newPassword" show-password auto-complete="on" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" show-password auto-complete="on" style="width: 370px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button :loading="loading" type="primary" @click="doSubmit">提交</el-button>
        <el-button type="warning" @click="cancel">重置</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updatePass } from '@/api/system/user'
import { getToken } from '@/utils/auth'
import store from '@/store'
import Avatar from '@/assets/images/avatar.png'
import myUpload from 'vue-image-crop-upload'
export default {
  components: { myUpload },
  data() {
    const confirmPass = (rule, value, callback) => {
      if (value) {
        if (this.form.newPassword !== value) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请再次输入密码'))
      }
    }
    return {
      show: false,
      Avatar: Avatar,
      loading: false, title: '个人中心', form: { oldPassword: '', newPassword: '', confirmPassword: '' },
      headers: {
        'Authorization': getToken()
      },
      rules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, validator: confirmPass, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'updateAvatarApi',
      'baseApi'
    ])
  },
  methods: {
    toggleShow() {
      this.show = !this.show
    },
    // 上传成功
    cropUploadSuccess(jsonData, field) {
      this.$notify({
        title: '上传头像成功！',
        type: 'success',
        duration: 1500
      })
      this.show = false
      store.dispatch('GetInfo').then(() => {})
    },
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          console.log(this.form)
          updatePass(this.form).then(res => {
            this.resetForm()
            this.$notify({
              title: '密码修改成功，请重新登录',
              type: 'success',
              duration: 1500
            })
            setTimeout(() => {
              store.dispatch('LogOut').then(() => {
                location.reload() // 为了重新实例化vue-router对象 避免bug
              })
            }, 1500)
          }).catch(err => {
            this.loading = false
            console.log(err.response.data.message)
          })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$refs['form'].resetFields()
      this.form = { oldPassword: '', newPassword: '', confirmPassword: '' }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  //.app-container{
  //  margin-left: 250px;
  //  margin-top: 100px;
  //}

  .dialog-footer{
    margin-left: 150px;
  }

  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }
</style>
